<template>
  <div id="app">
    <div class="container">
      <top-bar></top-bar>
      <!-- transition实现页面切换过渡效果 -->
      <transition name="fade">
        <!-- 非常重要 用来实现路由 -->
        <router-view />
      </transition>
      <scroll-top></scroll-top>
      <song-audio class="songAudio"></song-audio>
      <the-aside></the-aside>
      <play-bar></play-bar>
      <tab-bar></tab-bar>
      <router-view v-if="isRouterAlive" class="router-alive"></router-view>
    </div>
  </div>
</template>
<script>
  import TheAside from "./components/TheAside";
  import TopBar from "./components/TopBar";
  import SongAudio from "./components/SongAudio";
  import ScrollTop from "./components/ScrollTop";
  import TabBar from "./components/TabBar";
  import PlayBar from "./components/PlayBar";
  export default {
    name: "HomeApp",
    provide(){
      // 父组件向子组件发送消息
      return{
        reload: this.reload,
        showTopBar: true,
      }
    },
    data(){
      return{
        isRouterAlive: true
      }
    },
    components: {
      TopBar,
      TabBar,
      ScrollTop,
      SongAudio,
      TheAside,
      PlayBar
    },
    created() {
    },
    methods:{
      // reload()方法，在需要的页面注入使用
      reload(){
        this.isRouterAlive = false
        this.$nextTick(function(){
          this.isRouterAlive = true
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    /* 播放栏 + 底部导航栏高度 */
    padding-bottom: 100px;
    /* 搜索栏高度 */
    padding-top: 40px;
  }

  .container {
    /* padding-top: 40px; */
    overflow-x: hidden;
  }

  .fade-enter {
    opacity: 0;
    transform: translateX(100%);
  }

  .fade-leave-to {
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s ease;
  }


  .router-alive{
    display: none;
  }

</style>
